<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/jsf/template.xhtml">
    	<ui:define name="content">
    		
    		<style type="text/css" >
    			
    			.ui-widget-header {
    				background: #FFE600 !important;
    			}
    		
    			.corPanelDataGrid{
    				background-color: #999999;
                	text-align:center;
                	height:120px
                }
                
                .padding{
                	padding-top: 40px;
                	padding-bottom: 40px;
                	text-align:center;
                	height:120px;
                	width: 240px;
                	margin-left:20%;
                }
                
                .corPanelDataGridPrincipal{
    				background-color: #FFFFFF;
                	text-align:center;
                	height:120px
                }
                
    		</style>
    		
    		<p:panel>
    			<p:lineChart value="#{visaoGeralMB.linear}" legendPosition="e" 
    				animate="true" style="width:100%; height:200px;" title="Projeção - Pagamentos e Recebimentos" 
    				seriesColors="FFE600, 999999" />
    		</p:panel>
    		
    		<p:panel header="Total no mês" styleClass="corPanelDataGridPrincipal" style="width:49%; margin-left:25%">
    			<h:panelGrid columns="3" style="width:100%">
    				<h:panelGrid columns="1" style="width:100%">
	    				<h:outputText value="" />
	    				<h:outputText value="" />
	    				<h:outputText value="Quantidade de anuncios:" />
	    				<h:outputText value="" />
	    				<h:outputText value="#{visaoGeralMB.totalEspacoAlocado} / #{visaoGeralMB.totalEspacoDisponivel}" style="font-weight:bold; font-size:30px;" />
    				</h:panelGrid>
    				<h:panelGrid columns="1" style="width:100%">
	    				<h:outputText value="" />
	    				<h:outputText value="" />
	    				<h:outputText value="Quantidade de recebimentos:" />
	    				<h:outputText value="" />
	    				<h:outputText value="#{visaoGeralMB.totalRecebimentoMesAtual}" style="font-weight:bold; font-size:30px;" />
    				</h:panelGrid>
    				<h:panelGrid columns="1" style="width:100%">
	    				<h:outputText value="" />
	    				<h:outputText value="" />
	    				<h:outputText value="Quantidade de pagamentos:" />
	    				<h:outputText value="" />
	    				<h:outputText value="#{visaoGeralMB.totalPagamentoMesAtual}" style="font-weight:bold; font-size:30px;" />
    				</h:panelGrid>
    			</h:panelGrid>
    		</p:panel>
    		
    		<p:dataGrid var="pdv" value="#{visaoGeralMB.listaPDV}" columns="5" >
    			<p:panel id="panel" header="#{pdv.nome}" styleClass="corPanelDataGrid" >
    				<h:panelGrid columns="1" style="width:100%">
    					<h:outputText value="" />
    					<h:outputText value="" />
    					<h:outputText value="Quantidade de anuncios:" />
    					<h:outputText value="" />
    					<h:outputText value="#{pdv.qtdAnuncioAlocado}  / 25" style="font-weight:bold; font-size:30px;" />
    					<h:outputText value="" />
    					<p:tooltip for="panel" showEffect="fade" hideEffect="fade" >
	    					<p:dataGrid var="lisAnunciante" value="#{pdv.listaAnunciante}" columns="1" >
	    						<h:outputText value="#{lisAnunciante.nome}" style="font-weight:bold;" />
	    					</p:dataGrid>
    					</p:tooltip>
    				</h:panelGrid>
    			</p:panel>
    		</p:dataGrid>
    		
    	</ui:define>
    </ui:composition>
</html>